<script setup lang="ts">
//
</script>

<template>
  <view class="category">
    <scroll-view class="flex-item" scroll-y>
      <text class="vip">vip专享</text>
      <view class="box4">
        <image class="lav" src="https://i.postimg.cc/P5p8p7C8/2.png"></image>
      </view>

      <view class="box1">
        <view class="box2">
          <view class="box3">
          </view>
          <!-- 小组件1 -->
          <view class="box5"></view>
          <!-- 小组件2 -->
          <view class="box6"></view>
          <text class="test1">智能视频推荐</text>
          <!-- 滚动组件 -->
          <scroll-view class="box7" scroll-y>
            <!-- 视频组件 -->
            <navigator class="guess-item" v-for="item in 3" :key="item">
              <image class="image" mode="aspectFill" src="https://i.postimg.cc/kMZt6tkY/2.png"></image>
              <view class="name"> 50米正确跑步姿势 </view>
              <view class="autor"> 慧云跑官方</view>
            </navigator>
          </scroll-view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
.autor {
  width: calc(100% - 200rpx - 20rpx);
  height: 180rpx;
  overflow: hidden;
  white-space: nowrap;
  line-height: 210rpx;
}

.name {
  width: calc(100% - 200rpx - 20rpx);
  height: 180rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 60rpx;
}

.image {
  width: 400rpx;
  height: 180rpx;
  margin-right: 20rpx;
}

.guess-item {
  align-items: center;
  display: flex;
  width: 630rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
  background-color: #fff;
}

.box7 {
  position: absolute;
  left: 5rpx;
  top: 900rpx;
  width: 630rpx;
  height: 500rpx;
  border-radius: 20rpx;
  opacity: 1;
}

.test1 {
  /* 智能视频推荐 */

  position: absolute;
  left: 29px;
  top: 628px;
  width: 116px;
  height: 17px;
  opacity: 1;

  font-family: Source Han Sans;
  font-size: 16px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;

  font-feature-settings: "kern" on;
  color: #db2323;

}

.box5 {
  /* 矩形 5 */

  position: absolute;
  left: 5rpx;
  top: 500rpx;
  width: 300rpx;
  height: 280rpx;
  border-radius: 20rpx;
  opacity: 1;

  background: #FFFFFF;

}

.box6 {
  /* 矩形 6 */

  position: absolute;
  left: 350rpx;
  top: 500rpx;
  width: 280rpx;
  height: 280rpx;
  border-radius: 20rpx;
  opacity: 1;

  background: #FFFFFF;

}

.box4 {
  position: absolute;
  left: 218px;
  top: 48px;
  width: 108px;
  height: 121px;

}

.vip {
  /* VIP专享 */

  position: absolute;
  left: 22px;
  top: 36px;
  width: 125px;
  height: 49px;
  opacity: 1;

  font-family: Alimama ShuHeiTi;
  font-size: 30px;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0em;

  font-variation-settings: "opsz" auto;
  font-feature-settings: "kern" on;
  color: #FFFCFC;

}

.category {
  background: #3498DB;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.lav {
  /* 路径 */

  position: absolute;
  left: 0.55px;
  top: 7.56px;
  width: 95.22%;
  height: 87.5%;
  opacity: 1;

  background: #fffcfc;


}

.box1 {
  /* 矩形 1 */

  position: absolute;
  left: 0px;
  top: 300rpx;
  width: 750rpx;
  height: 1500rpx;
  border-radius: 25px 25px 0px 0px;
  opacity: 1;
  background: #ECF0F1;

}

.flex-item {
  flex: 1;
  /* 占据剩余空间 */
}

.box2 {
  /* 矩形 4 */

  position: absolute;
  left: 60rpx;
  top: 70rpx;
  width: 630rpx;
  height: 249px;
  border-radius: 10px;
  mix-blend-mode: screen;
  opacity: 1;

  background: #FFFCFC;

}

.box3 {
  /* 项目 */

  position: absolute;
  left: 46px;
  top: 211px;
  width: 299px;
  height: 18px;
  opacity: 1;

  font-family: ABeeZee;
  font-size: 16px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;

  font-variation-settings: "opsz" auto;
  font-feature-settings: "kern" on;
  color: #3D3D3D;

}
</style>
